<template>
  <div class="map-content">
    <div class="page" id="map-container"></div>
    <div id="panel"></div>
  </div>
</template>
<script>
  import AMap from 'AMap'
  export default {
    name: "MapDemo",//@/plugin/AMap
    data() {
      return {
        map: null,
        parms: {
          start: {
            latitude: 29.50674,
            longitude: 121.82831,
          },
          end: {
            latitude: 29.974115,
            longitude: 121.311381,
          },
        },
      };
    },
    mounted() {
      this.init(this.parms);
    },
    methods: {
      gaodeClick(params) {
        this.init(params);
      },
      destroy() {
        this.map && this.map.destroy(); // 销毁地图
        // $("#panel").empty() ;
      },
      init(params) {
        this.destroy() ;
        // 地图初始化
        this.map = new AMap.Map("map-container", {
          resizeEnable: true,
          center: [params.start.longitude, params.start.latitude], // 地图中心点
          zoom: 16, // 地图显示的缩放级别   1-16 越大越详细
        });
        // 'AMap.ToolBar'集成了缩放、平移、定位等功能,'AMap.Scale'展示地图在当前层级和纬度下的比例尺
        // 添加需要操作的类AMap.Transfer(公交换乘[不包含地铁]),AMap.Geolocation(浏览器精准定位)
        // 公交站点查询
        AMap.plugin([], () => {});
        AMap.plugin(
          [
            "AMap.ToolBar",
            "AMap.Driving",
          ],
          () => {
            this.map.addControl(new AMap.ToolBar());
            this.map.addControl(new AMap.Driving());
          }
        );
        // this.getRoute(); // 获取线路规划
        this.getDriving(params); // 驾车线路规划
      },
      /**
       * @description 驾车路线规划服务
       * 提供起、终点坐标的驾车导航路线查询功能。
       * 入参  起终点的经纬度
       */
      getDriving(params) {
        //构造路线导航类
        let _this = this;
        var driving = new AMap.Driving({
          map: this.map, // 工具挂载到那个对象
          panel: "panel",
        });

        // 根据起终点经纬度规划驾车导航路线
        driving.search(
          new AMap.LngLat(params.start.longitude, params.start.latitude),
          new AMap.LngLat(params.end.longitude, params.end.latitude),
          // new AMap.LngLat(116.379028, 39.865042),
          // new AMap.LngLat(116.427281, 39.903719),
          function (status, result) {
            // result 即是对应的驾车导航信息，相关数据结构文档请参考  https://lbs.amap.com/api/javascript-api/reference/route-search#m_DrivingResult
            if (status === "complete") {
              // log.success("绘制驾车路线完成");
            } else {
              // log.error("获取驾车数据失败：" + result);
            }
          }
        );
      },

      // 路线规划文档地址https://lbs.amap.com/api/javascript-api/reference/route-search#m_TransferPolicy
      getRoute() {
        new AMap.Transfer({
          map: this.map, // 工具挂载到那个对象
          panel: "panel", // 节点容器
        }).search(
          [
            { keyword: "宁波大学", city: "宁波" },
            { keyword: "宁波老外滩", city: "宁波" },
          ],
          function (status, data) {
            console.log(data);
          }
        );
      },
    },
  };
</script>
<style  scoped>
  .page {
    height: calc(100vh - 50px);
  }
  .map-content {
    position: relative;
  }
  #panel {
    position: absolute;
    top: 0;
    right: 0;
  }
</style>

